<template>
  <div class="flex flex-column height order">
    <header-top
      ref="header"
      :TxtHeader="TxtHeader"
      style="border:1px solid #eee"
      @leftClick="back"
    ></header-top>
    <div class="content">
      <div class="top">
        <div class="patient">
          <div class="pay_title">
            添加就诊人
          </div>
          <div class="add">
            <button v-if="!patientInfo" @click="selectPatientFn"></button>
            <div
              v-if="patientInfo"
              @click="selectPatientFn"
              class="patient_info"
            >
              <h3>{{ patientInfo.name }}</h3>
              <p>
                <span v-if="patientInfo.sex == 1">男</span>
                <span v-if="patientInfo.sex == 2">女</span>
                <span v-if="patientInfo.sex == 3">未知</span>
                <i>|</i>
                <span>{{ patientInfo.age }}岁</span>
                <i>|</i>
                <span>{{ patientInfo.mobile }}</span>
              </p>
              <van-icon class="arrow" name="arrow" />
            </div>
          </div>
        </div>
        <div class="patient">
          <div class="pay_title">
            科室
          </div>
          <van-field
            class="department"
            v-model="departmentText"
            readonly
            @click="departmentFn"
            right-icon="arrow"
            placeholder="请选择科室"
          />
        </div>
        <div class="patient">
          <div class="pay_title">
            描述病情
          </div>
          <van-field
            v-model="illness"
            type="textarea"
            class="textarea"
            maxlength="500"
            minlength="10"
            placeholder="为了更好的获得医生诊治，请尽可能详细描述患者的病情和症状。例如患病时长，是否在线下医院治疗过，是否正在服药，想获得的帮助等（10-500字）"
          />
        </div>
        <div class="patient">
          <div class="pay_title">
            是否复诊
          </div>
          <div class="pay_button">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio checked-color="#08d6c6" name="1">否</van-radio>
              <van-radio checked-color="#08d6c6" name="2">是</van-radio>
            </van-radio-group>
          </div>
        </div>
        <div class="patient">
          <div class="pay_title">
            上传检查单/患处照片(选填，最多8张)
          </div>
          <div class="upload flex flex-wrap">
            <div class="imglist" v-for="(item, index) in fileList" :key="index">
              <img :src="item.content" alt="" />
              <img
                class="clear"
                @click="delImgFn(item)"
                src="./img/close.png"
                alt=""
              />
            </div>
            <van-uploader
              v-model="fileList"
              :preview-image="false"
              :accept="'image/*'"
              multiple
              :after-read="afterRead"
              :max-count="8"
            >
              <template>
                <div class="add">
                  <button></button>
                </div>
              </template>
            </van-uploader>
          </div>
        </div>
      </div>
      <div class="center flex-wrap">
        <van-checkbox
          v-model="checked"
          icon-size="0.12rem"
          checked-color="#07c160"
        ></van-checkbox>
        <span>
          温馨提示：根据国家互联网诊疗相关政策的要求，请您在使用服务前仔细阅读<i>《风险告知及患者之情同意书》</i>，如您并非线上复诊，平台医师仅为您提供健康咨询服务，咨询意见供您参考，继续操作表示您知悉并同意上述告知内容。</span
        >
      </div>
      <van-popup
        v-model="isShow"
        position="bottom"
        :closeable="true"
        :overlay="false"
        :style="{ height: 'calc(100% - 0.5rem)', top: '0.5rem' }"
      >
        <van-tree-select
          :items="departmentList"
          :active-id.sync="activeId"
          height="100%"
          :main-active-index.sync="activeIndex"
          @click-nav="clickNavFn"
          @click-item="itemFn"
        />
      </van-popup>
    </div>
    <div class="bottom">
      <button
        @click="goNext"
        :class="
          checked && patientInfo && illness && radio && department
            ? 'active'
            : ''
        "
      >
        下一步
      </button>
    </div>
  </div>
</template>
<script>
import HeaderTop from "@/components/header-top";
import { GetLevel, createOrder } from "@/api/index";
import {uploadBatch} from '@/api/upfile';
import { Dialog } from "vant";
export default {
  name: "Order",
  components: {
    HeaderTop,
    [Dialog.Component.name]: Dialog.Component
  },
  data() {
    return {
      departmentList: [],
      activeId: "",
      activeIndex: -1,
      isShow: false,
      checked: false,
      isActive: false,
      patientInfo: "",
      illness: "",
      order: "",
      radio: "",
      fileList: [],
      imgUrl: "",
      department: "",
      departmentText: "",
      TxtHeader: {
        //头部设置
        color: "#333", //头部中间文字颜色
        title: "填写订单",
        background: "#fff",
        leftOpt: {
          //左边按钮设置
          icon: "",
          text: "",
          color: "#333"
        }
      }
    };
  },
  created() {
    let patientData = localStorage.patientData || "";
    let order = localStorage.order || "";
    localStorage.removeItem("orderNumber");
    if (order) {
      this.order = JSON.parse(order);
    }
    if (patientData) {
      patientData = JSON.parse(patientData);
      this.patientInfo = patientData;
    }
  },
  methods: {
    departmentFn() {
      this.isShow = true;
      this.GetLevelFn();
    },
    itemFn(val) {
      this.departmentText = val.text;
      this.department = val.id;
      this.isShow = false;
    },
    clickNavFn(item) {
      this.GetLevelFn(item);
    },
    GetLevelFn(item) {
      const data = {
        parentDeparmentCode:
          item != undefined ? this.departmentList[item].valueCode : ""
      };
      GetLevel(data).then(res => {
        if (res.body) {
          if (item != undefined) {
            res.body.departMentList.map(key => {
              key.id = key.valueCode;
              key.text = key.valueName;
            });
            this.departmentList[item].children = res.body.departMentList;
            this.departmentList = this.departmentList.filter(key => key != "");
          } else {
            res.body.departMentList.map(key => {
              key.id = key.valueCode;
              key.text = key.valueName;
            });
            this.departmentList = res.body.departMentList;
          }
        } else {
          Dialog.alert({
            message: "数据异常",
            confirmButtonText: "我知道了"
          });
        }
      });
    },
    goNext() {
      if (!this.patientInfo) {
        Dialog.alert({
          message: "请添加就诊人",
          confirmButtonText: "知道了"
        });
        return false;
      }

      if (!this.department) {
        Dialog.alert({
          message: "请选择科室",
          confirmButtonText: "知道了"
        });
        return false;
      }
      if (!this.illness) {
        Dialog.alert({
          message: "请描述病情",
          confirmButtonText: "知道了"
        });
        return false;
      }
      if (!this.radio) {
        Dialog.alert({
          message: "请选择是否复诊",
          confirmButtonText: "知道了"
        });
        return false;
      }
      if (!this.checked) {
        Dialog.alert({
          message: "请确认阅读风险告知",
          confirmButtonText: "知道了"
        });
        return false;
      }
      const obj = {
        patientId: this.patientInfo.id,
        patientName: this.patientInfo.name,
        patientSex: this.patientInfo.sex.code,
        patientPhone: this.patientInfo.mobile,
        diseaseDescription: this.illness,
        patientRepeat: this.radio == 1 ? "N" : "Y",
        patientImageList: this.imgUrl,
        department: this.departmentText,
        departmentId: this.department,
        inquiryMode: "",
        doctorId: this.order.id,
        inquiryType: 1,
        patientAge: this.patientInfo.age,
        doctorChannel: 0
      };
      let text = "";
      switch (this.order.type) {
        case "1":
          text = "图文";
          obj.inquiryMode = 1;
          break;
        case "2":
          text = "视频";
          obj.inquiryMode = 0;
          break;
        case "3":
          text = "挂号";
          obj.inquiryMode = 1;
          obj.inquiryType = 2
          break;
        default:
          break;
      }
      createOrder(obj).then(res => {
        console.log(res);
        if (res.body) {
          localStorage.setItem("orderNumber",res.body.orderNumber)
          this.$router.push("/purchasingServices");
        }
      });
    },
    selectPatientFn() {
      this.$router.push("/chooseVisitor");
    },
    delImgFn(item) {
      this.fileList = this.fileList.filter(key => key != item);
    },
    afterRead(file) {
      console.log(this.fileList, file);
      let fd = new FormData()
      fd.append('file', file.file)
      uploadBatch(fd).then(res=>{
        console.log(res)
      })
    },
    back() {
      this.$router.push("/index");
    }
  }
};
</script>
<style scoped>
.order >>> .van-field--min-height .van-field__control {
  height: 1.28rem;
}
.order >>> .van-checkbox {
  display: inline-block;
}
.order >>> .van-radio--horizontal {
  margin-right: 100px;
  margin-left: 10px;
}
.textarea {
  border: 1px solid #eae9e9;
  border-radius: 0.05rem;
  background: #f2f2f2;
}
.order >>> .van-uploader__preview {
  margin: 0 0.15rem 0.25rem 0;
}
.department {
  border: 1px solid #eae9e9;
  border-radius: 0.05rem;
}
.department {
  background: #fff;
}
.order >>> .van-tree-select__nav {
  width: 1.36rem;
  flex: none;
}
.order >>> .van-tree-select__nav-item {
  padding: 0;
  text-align: center;
  font-size: 0.12rem;
  height: 0.37rem;
  width: 1.36rem;
  line-height: 0.37rem;
}
.order >>> .van-tree-select__item--active {
  color: #02c0cb;
}
.order >>> .van-sidebar-item--select::before {
  position: absolute;
  top: 50%;
  left: 0.2rem;
  margin-top: -5px;
  border: 3px solid;
  width: 0;
  height: 0;
  background: none;
  border-color: transparent transparent #02c0cb #02c0cb;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  opacity: 0.8;
  content: "";
}
</style>
<style lang="less" scoped>
.order {
  .content {
    height: calc(100% - 1.24rem);
    overflow-y: auto;
    .top {
      background: #fff;
      overflow-y: auto;
      padding: 0.15rem;
      .patient {
        margin-bottom: 0.2rem;
        .upload {
          .imglist {
            position: relative;
            width: 0.65rem;
            height: 0.65rem;
            margin: 0 0.15rem 0.25rem 0;
            .clear {
              position: absolute;
              right: -0.05rem;
              top: -0.05rem;
              width: 0.2rem;
              height: 0.2rem;
            }
            img {
              width: 0.65rem;
              height: 0.65rem;
            }
          }
        }
        button {
          width: 0.65rem;
          height: 0.65rem;
          background: url("./img/add_icon.png") no-repeat left top;
          background-size: 100%;
          border: 0;
          background-color: none;
        }
        .patient_info {
          position: relative;
          padding: 0.1rem 0.15rem;
          box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.07);
          .arrow {
            position: absolute;
            right: 0.15rem;
            top: 0.25rem;
            color: #666;
            font-size: 0.16rem;
          }
          h3 {
            font-size: 0.16rem;
            height: 0.22rem;
            line-height: 0.22rem;
            margin-bottom: 0.08rem;
          }
          p {
            span {
              margin-right: 0.12rem;
              color: #666;
            }
            i {
              margin-right: 0.12rem;
              font-size: 0.1rem;
              color: #ccc;
            }
          }
        }
      }
    }
    .center {
      padding: 0.15rem;
      line-height: 0.2rem;
      span {
        i {
          color: #08d6c6;
        }
      }
    }
  }
  .bottom {
    padding: 0.15rem 0.2rem;
    background: #fff;
    font-size: 0.18rem;
    box-shadow: 0px -1px 6px 0px rgba(0, 0, 0, 0.06);
    button {
      width: 100%;
      height: 0.44rem;
      border: 0;
      border-radius: 0.44rem;
      background: #f5f5f5;
      color: #ccc;
    }
    button.active {
      color: #fff;
      background-image: linear-gradient(to left, #02c0cb, #0adda4);
    }
  }
  .pay_title {
    padding-left: 0.15rem;
    position: relative;
    font-size: 0.18rem;
    height: 0.25rem;
    line-height: 0.25rem;
    margin-bottom: 0.12rem;
  }
  .pay_title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 0.05rem;
    height: 0.15rem;
    background: #08d6c6;
  }
}
</style>
